const form = document.querySelector('#form');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
const password2 = document.querySelector('#password2');


// 输入的值 和 提示信息
function showError(input, message) {
    // 获取错误input的父级元素
    const formControl = input.parentElement;
    // 给他添加一个类名 
    formControl.className = 'form-control error';
    // 获得 small 错误信息提示属性
    const small = formControl.querySelector('small');
    // 给 small 添加一些错误的提示信息
    small.innerText = message;
}

// 输入成功 就改变 input 框颜色
function showSuccess(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success'
}

// 判断所有 input 输入是否为空
function checkRequired(inputArr){
    // input 默认是空
    let isRequired = false;
    inputArr.forEach(function(input) {
        if(input.value.trim() === ''){
            showError(input, `${getFieldName(input)} 是必须填写的`);
        } else {
            showSuccess(input);
        }
    });
    return isRequired;
}

// 判断用户名和密码 input 的长度
function checkLength(input, min, max) {
    if(input.value.length < min) {
        showError(input, `${getFieldName(input)}必须多于${min}位`);
    } else if(input.value.length > max) {
        showError(input, `${getFieldName(input)}必须少于${max}位`);
    } else {
        showSuccess(input)
    }
}

// 对输入的字段进行判断
function getFieldName(input) {
    return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

// 检验 email  /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
function checkEmail(input) {
    // 设定正则表达式
    const re = /^([0-9][a-zA-Z])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
    // 检查正则表达式
    if(re.test(input.value.trim())) {
        showSuccess(input);
    } else {
        showError(input, '邮箱无效')
    }
}

// 对两次输入的密码进行判断
function checkPasswordsMatch(input1, input2) {
    if(input1.value !== input2.value) {
        showError(input2, '两次密码不匹配');
    }
}

// 事件监听
form.addEventListener('submit', function(e) {
    // 阻止 form 表单是默认行为
    e.preventDefault();
    
    // !checkRequired 是因为给这个 的值为非空  前面写了 isRequired = false
    if(!checkRequired([username, email, password, password2])) {
        // 判断 密码 和 用户名长度
        checkLength(username, 3, 15);
        checkLength(password, 6, 20);
        // 检查email 格式是否正确
        checkEmail(email);
        checkPasswordsMatch(password, password2)
    }
})